<template>
	<view class="app-classify-page-two e-flex e-flex-items-start">
		<view class="app-classify-page-two__left " >
			<menu-card v-model="menuIndex" 
				:list="(menuList||[])" :menuType="type === 3 ? 4: 2"
				label="name"></menu-card>
		</view>
		<view class="app-classify-page-two__right e-flex-1 overflow-hidd" >
			<ClassifyList :classifyId="classifyId" v-if="type === 3" />
			<ClassifyGoodsList :refresherEnabled="menuIndex > 0" :classifyId="classifyId" @prev="handleSwitchPrev" @next="handleSwitchNext" v-else/>
		</view>
	</view>
</template>

	
<script setup lang="ts">
	import { ref, watch } from 'vue';
	import ClassifyList from './classify-list.vue'
	import ClassifyGoodsList from './goods-list.vue'
	import { getGoodsClassify, getStoreGrouping } from '@/common/request/api';
	import type { ClassifyItem } from '@/common/request/api';
	import type {PickPromise} from '@/typings'
	
	const props = defineProps({
		type: Number
	});
	
	const classifyId = ref<number>(-1);
	const menuList = ref<ClassifyItem[]>([]);
	const menuIndex = ref(0);
	
	
	
	watch(menuIndex, (v) => {
		classifyId.value = menuList.value[v]?.id;
	});
	
	const getData = async () => {
		let res:PickPromise<ReturnType<typeof getGoodsClassify>>
		
		// #ifndef PRIVATE
		res = await getGoodsClassify();
		// #endif
		// #ifdef PRIVATE
		res = await getStoreGrouping({
			storeId: uni.getStorageSync('storeId')
		});
		// #endif
		menuList.value = res.data;
		classifyId.value = res.data[0]?.id 
	};
	
	const handleSwitchPrev = () => {
		if(menuIndex.value > 0){
			menuIndex.value--
		}
	}
	const handleSwitchNext = () => {
		if(menuIndex.value < menuList.value.length){
			menuIndex.value++
		}
	}


	
	getData()
</script>

<style lang="scss" scoped>
	@include appBem_b(classify-page-two){
		height:100%;
		@include appBem_e(left){
			flex: 0 0 184rpx;
			height: 100%;
		}
		@include appBem_e(right){
			height: 100%;
		}
	}
</style>